<template lang="pug">
  .m-content
    .header {{info.platformId}}详情
    .main
      el-tabs(v-model="activeName" type="border-card")
        el-tab-pane(label="基本信息" name="first")
          table.baseInfo
            tr
              td 成员接入号
              td {{info.platformId | filtersEmpty}}
            tr
              td 组合接入号
              td {{info.combinationTag | filtersEmpty}}
            tr
              td bizid
              td {{info.userId | filtersEmpty}}
            tr
              td 归属地市
              td {{getAreaCodeLabel(info.areaCode ) | filtersEmpty}}
            tr
              td 资源池
              td {{info.region | filtersEmpty}}
        el-tab-pane(label="详细信息" name="second")
          el-button(type="primary" class="export"  icon="iconfont icon-chaxun1" @click="exportvm") 导出
          table.baseInfo
            tr
              td 云主机名称
              td {{aInfo.name | filtersEmpty}}
            tr
              td 云主机创建时间
              td {{formatterAt(aInfo.createAt) | filtersEmpty}}
            tr
              td 云主机更新时间
              td {{formatterAt(aInfo.remoteUpdateAt) | filtersEmpty}}
            tr
              td 云主机过期时间
              td {{formatterAt(aInfo.remoteExpireAt) | filtersEmpty}}
            tr
              td 状态
              td {{getPowerStateLabel(aInfo.powerState)}}
            tr
              td 规格
              td(v-if="aInfo.vcpus&&aInfo.memory") {{`${aInfo.vcpus}C ${aInfo.memory}G`}}
              td(v-else) --
            tr
              td 公网带宽
              td.pad-0
                ul
                  li(v-if="aInfo.refNetwork&&aInfo.refNetwork.bandwidth") {{aInfo.refNetwork&&aInfo.refNetwork.bandwidth}}Mbps
                  li(v-else) 0 Mbps
                  li(v-if="aInfo.refNetwork&&aInfo.refNetwork.bandwidth")
                    span.name 过期时间
                    | {{formatterAt(aInfo.remoteExpireAt) | filtersEmpty}}
                  li(v-else)
                    span.name 过期时间
                    | --
            tr
              td  IP
              td.pad-0
                ul
                  li
                    span.name 公网
                    | {{aInfo.refNetwork&&aInfo.refNetwork.accessIpV4 | filtersEmpty}}
                  li
                    span.name 私网
                    | {{aInfo.refNics&&aInfo.refNics.map(v=>v.ipV4).join(';') | filtersEmpty}}
            tr
              td  系统磁盘
              td.pad-0
                ul
                  li
                    span.name 大小
                    | {{aInfo.refSystemDisk&&aInfo.refSystemDisk.size | filtersEmpty}}GB
                  li
                    span.name 类型
                    | {{aInfo.refSystemDisk&&aInfo.refSystemDisk.type | filtersEmpty}}

            tr(v-if="aInfo.refAttachedDisk")
              td 数据磁盘
              td(v-if="aInfo.refAttachedDisk.length>0").pad-0
                ul( v-for="item in aInfo.refAttachedDisk")
                  li
                    span.name 名称
                    | {{item.name | filtersEmpty}}
                  li
                    span.name 天翼云名称
                    | {{item.externalName | filtersEmpty}}
                  li
                    span.name 天翼云ID
                    | {{item.externalId | filtersEmpty}}
                  li
                    span.name 大小
                    | {{item.size}}GB
                  li
                    span.name 类型
                    | {{item.type}}
                  li
                    span.name 过期时间
                    | {{formatterAt(aInfo.remoteExpireAt)}}
              td(v-else) --
            tr
              td 操作系统类型
              td {{aInfo.osType | filtersEmpty}}
            tr
              td 操作系统名称
              td {{aInfo.osName | filtersEmpty}}
            tr
              td VPC
              td.pad-0
                ul
                  li
                    span.name 名称
                    | {{aInfo.resourceVpc&&aInfo.resourceVpc.name | filtersEmpty}}
                  li
                    span.name ID
                    | {{aInfo.resourceVpc&&aInfo.resourceVpc.externalId | filtersEmpty}}
                  li
                    span.name cidr
                    | {{aInfo.resourceVpc&&aInfo.resourceVpc.cidr | filtersEmpty}}
                  li
                    span.name 创建时间
                    | {{formatterAt(aInfo.resourceVpc&&aInfo.resourceVpc.createAt) | filtersEmpty}}
            tr(v-if="aInfo.resourceVpc&&aInfo.resourceVpc.securityGroups")
              td 安全组
              td.pad-0
                ul(v-for="item in aInfo.resourceVpc&&aInfo.resourceVpc.securityGroups")
                  li
                    span.name 名称
                    | {{item.name}}
                  li
                    span.name ID
                    | {{item.externalId}}
            tr(v-if="aInfo.resourceVpc&&aInfo.resourceVpc.networks")
              td  子网
              td.pad-0
                ul(v-for="item in aInfo.resourceVpc&&aInfo.resourceVpc.networks")
                  li
                    span.name 名称
                    | {{item.name}}
                  li
                    span.name ID
                    | {{item.externalId}}
</template>
<script>
import { detail, baseinfo, exportVm } from '@/api/resource'
import { areaCodes, powerState } from '@/utils/config'
import { compose, isEmpty, formatAt } from '@/utils/index'
export default {
  data () {
    return {
      activeName: 'first',
      info: {},
      aInfo: {}
    }
  },
  created () {
    const id = this.$route.params && this.$route.params.id
    this.getInfo(id)
    this.getbaseinfo(id)
  },
  filters: {
    filtersEmpty (value) {
      return isEmpty(value)
    }
  },
  methods: {
    getPowerStateLabel (cond) {
      let obj = powerState.filter(v => v.value === cond + '')[0]
      return obj && obj.label
    },
    formatterAt (value) {
      let _formatAt = formatAt.bind(null, this.$moment)
      return compose(_formatAt, isEmpty)(value)
    },
    getbaseinfo (id) {
      baseinfo.call(this, id).then(res => {
        this.info = res.data && res.data.data
      })
    },
    getInfo (id) {
      detail.call(this, id).then(res => {
        this.aInfo = res.data && res.data.data
      })
    },
    getAreaCodeLabel (cond) {
      let obj = areaCodes.filter(v => v.value === cond + '')[0]
      return obj && obj.label
    },
    exportvm () {
      const id = this.$route.params && this.$route.params.id
      window.location.href = exportVm(id)
    }
  }
}
</script>
<style lang="stylus" scoped>
.m-content
  .header
    height 40px
    font-size 12px
    line-height @height
    padding 0 20px
    border-bottom 1px solid #e8e8e8
    color #333
  .main
    margin 23px
    .subtitle
      margin-bottom 15px
    .el-tabs
      box-shadow none
      border 0
      >>>
        .el-tabs__header
          border 0
        .el-tabs__item
          margin 0 -1px -1px
          height 35px
          line-height 35px
        .is-active
          border-color #1f60bd transparent transparent transparent
        .el-tabs__content
          padding 0
          margin-top 20px
    .export
      margin-bottom 20px
    .baseInfo
      width: 100%;
      font-size 12px
      border 1px solid #dfe7ec
      // border-collapse collapse
      tr
        td
          height 30px
          line-height: 30px
          padding: 0 15px
          border-bottom 1px solid #dfe7ec
          &:nth-of-type(1)
            width: 120px;
            background: #f7fafd

            border-right 1px solid #dfe7ec
          &.active
            border-bottom 1px solid #dfe7ec
          &.pad-0
            padding: 0
          .name
            display inline-block
            width 80px
        ul
          border-bottom 1px solid #dfe7ec
          &:last-child
            border-bottom 0
          li
            display block
            list-style none
            padding: 0 15px

</style>
